import { addMyChannels, deleteMyChannels, getAllChannelList, getUserChannelList } from '@/store/action/channel'
import { Popup, Tabs, Toast } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { TypeState } from '@/store'
import styles from './index.module.scss'
import SvgIcon from '@/component/icon'
import classNames from 'classnames'
import { ListType } from '@/store/reducer/channel'
import history from '@/utils/history'
export default function Channel() {
  const dispatch = useDispatch()
  // 获取用户的频道列表
  const { list, allList } = useSelector((state: TypeState) => state.channel)
  // { 获取频道列表}
  useEffect(() => {
    dispatch(getUserChannelList())
    dispatch(getAllChannelList())
  }, [dispatch])

  const [popupShow, setPopupShow] = useState(false)
  // 计算剩余的频道列表
  const remainingChanel = allList.filter((item) => {
    const arr = list.find((item2) => {
      return item2.name === item.name
    })
    return arr ? false : true
  })
  //  当前的id
  const [activedInx, setActivedInx] = useState(0)
  // 控制删除
  const [changeEditAndDone, setChangeEditAndDone] = useState(false)
  // 添加我的频道
  const addMyChannel = (item: ListType) => {
    dispatch(addMyChannels(item))
  }
  // 删除指定的频道
  const handleDelChannel = (id: number) => {
    if (list.length < 6) {
      return Toast.show({ content: '不能再删除了' })
    }

    dispatch(deleteMyChannels(id))
  }
  return (
    <>
      <div className={styles.root}>
        <Tabs onChange={(key: string) => setActivedInx(Number(key))} activeKey={String(activedInx)} className="tabs">
          {list.map((item) => {
            return <Tabs.Tab title={item.name} key={item.id}></Tabs.Tab>
          })}
        </Tabs>
        <div className="right">
          <SvgIcon onClick={() => history.push('/search')} type="iconbtn_search" />
          <SvgIcon onClick={() => setPopupShow(true)} type="iconbtn_channel" />
        </div>
      </div>
      <Popup visible={popupShow} position="left" bodyClassName={styles.channelPopup}>
        <span onClick={() => setPopupShow(false)}>X</span>
        <h3>右侧弹出层</h3>
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <SvgIcon type="iconbtn_channel_close" onClick={() => setPopupShow(false)} />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className={classNames('channel-item', changeEditAndDone ? 'edit' : '')}>
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击进入频道</span>
              <span
                className="channel-item-edit"
                onClick={() => {
                  setChangeEditAndDone(!changeEditAndDone)
                }}
              >
                {changeEditAndDone ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {list.map((item) => {
                return (
                  <span
                    key={item.id}
                    onClick={() => {
                      setActivedInx(item.id)
                      setPopupShow(false)
                    }}
                    className={classNames('channel-list-item', activedInx === item.id ? 'selected' : '')}
                  >
                    {item.name}
                    <SvgIcon
                      onClick={(e) => {
                        e.stopPropagation()
                        // 阻止时间冒泡
                        handleDelChannel(item.id)
                      }}
                      type="iconbtn_tag_close"
                    />
                  </span>
                )
              })}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {remainingChanel.map((item) => {
                return (
                  <span
                    onClick={() => {
                      addMyChannel(item)
                    }}
                    key={item.id}
                    className="channel-list-item"
                  >
                    + {item.name}
                  </span>
                )
              })}
            </div>
          </div>
        </div>
      </Popup>
    </>
  )
}
// 弹出层
